{% extends "registration/base.html" %}

{% block title %}Sign up{% endblock %}

{% block script %} 
    <script type="text/javascript">
    $(document).ready(function(){
        $("#login-link-inline").fancybox({
            'titlePosition' : 'inside', 
            'transitionIn' : 'none',
            'transitionOut' : 'none' 
        });
        
    }); 
    </script>
{% endblock %} 

{% block content %}
<div class="restamain">
    <div class="container_16">
        <div class="grid_16">
            {% if form.errors %}
                <p class="errors">Please correct the errors below: {{ form.non_field_errors }}</p>
            {% endif %}

            <h1>Create an account</h1>
            <p>Already have an account?  <a id="login-link-inline" href="#login-fancy">Login here</a>.</p>
            <form method="post" action="" class="wide">{% csrf_token %}
                <div class="fourcol">
                    <label for="id_username">Username:</label>
                </div>
                <div class="eightcol last">
                    {% if form.username.errors %}
                        <p class="errors">{{ form.username.errors.as_text }}</p>
                    {% endif %}
                    {{ form.username }}
                </div>

                <div class="fourcol">
                    <label for="id_email">Email address:</label>
                </div>
                <div class="eightcol last">

                    {% if form.email.errors %}
                        <p class="errors">{{ form.email.errors.as_text }}</p>
                    {% endif %}
                    {{ form.email }}
                </div>

                <div class="fourcol">
                    <label for="id_password1">Password:</label>
                </div>
                <div class="eightcol last"> 
                    {% if form.password1.errors %}
                        <p class="errors">{{ form.password1.errors.as_text }}</p>
                    {% endif %}
                    {{ form.password1 }}
                </div>

                <div class="fourcol "> 
                    <label for="id_password2">Password again:</label>
                </div>
                <div class="eightcol last">
                    {% if form.password2.errors %}
                    <p class="errors">{{ form.password2.errors.as_text }}</p>
                    {% endif %}
                    {{ form.password2 }}
                </div>
                <p class="submit"><input type="submit" value="Register &rarr;"></p>

                
                <p>Fill out the form to the left (all fields are required), and your account will be created; you'll be sent an email with instructions on how to finish your registration.</p>

                <p>We'll only use your email to send you signup instructions. We hate spam as much as you do.</p>
            </form>
        </div>
    </div>
</div>
{% endblock %}
